<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-01-31 14:54:13
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-03 17:39:47
 * @FilePath: \recruitApp\recruitApp\src\pages\user\Me\Information.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 视图层 -->
<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field name="uploader" label="头像上传">
          <template #input>
            <van-uploader
              v-model="imgUrl"
              multiple
              :max-count="1"
              :after-read="afterRead"
            />
          </template>
        </van-field>
        <van-field
          v-model="name"
          label="姓名"
          name="name"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          name="fieldValue"
          label="性别"
          placeholder="选择性别"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <van-field
          v-model="fieldValueTwo"
          name="fieldValueTwo"
          is-link
          readonly
          label="求职状态"
          placeholder="求职状态"
          @click="showPickerTwo = true"
        />
        <van-popup v-model:show="showPickerTwo" round position="bottom">
          <van-picker
            :columns="columnsTwo"
            @cancel="showPickerTwo = false"
            @confirm="onConfirmTwo"
          />
        </van-popup>
        <van-field
          v-model="fieldValueThree"
          name="fieldValueThree"
          is-link
          readonly
          label="学历"
          placeholder="选择学历"
          @click="showPickerThree = true"
        />
        <van-popup v-model:show="showPickerThree" round position="bottom">
          <van-picker
            :columns="columnsThree"
            @cancel="showPickerThree = false"
            @confirm="onConfirmThree"
          />
        </van-popup>
        <van-field
          v-model="emile"
          name="emile"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<!-- 逻辑层 -->
<script setup>
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
import { ref } from "vue";
import { get, post, put, del, patch } from "~/axios/http";
const imgUrl = ref([{ url: "" }]);
const emile = ref("");
const name = ref("");
async function onSubmit(values) {
  console.log("submit", values);
  console.log(values.uploader[0].content);
  let id = ref(localStorage.getItem("key"));
  let res = await patch(`/api/infomation/${id.value}`, {
    img: values.uploader[0].content,
    name: values.name,
    gender: values.fieldValue,
    state: values.fieldValueTwo,
    degree: values.fieldValueThree,
  });
  router.push("/Me/me");
}
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
};
const columns = [
  { text: "男", value: "Boy" },
  { text: "女", value: "Girl" },
];
const fieldValue = ref("");
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
};

const columnsTwo = [
  { text: "在职", value: "in" },
  { text: "离职", value: "out" },
];
const fieldValueTwo = ref("");
const showPickerTwo = ref(false);
const onConfirmTwo = ({ selectedOptions }) => {
  showPickerTwo.value = false;
  fieldValueTwo.value = selectedOptions[0].text;
};

const columnsThree = [
  { text: "初中", value: "secondary" },
  { text: "高中", value: "high" },
  { text: "中专", value: "technical" },
  { text: "大专", value: "junior" },
  { text: "本科", value: "undergraduate" },
  { text: "硕士", value: "msc" },
  { text: "博士", value: "dr" },
];
const fieldValueThree = ref("");
const showPickerThree = ref(false);
const onConfirmThree = ({ selectedOptions }) => {
  showPickerThree.value = false;
  fieldValueThree.value = selectedOptions[0].text;
};
</script>
<!-- 样式层 -->
<style  scoped>
</style>